<template>
    <div style="background:#fff">
        <div style="padding:10px">
            <div style="padding-bottom:10px">
                    <el-date-picker v-model="CheckingInDate"  format="yyyy-MM" value-format="yyyy-MM" type="month" size="small" @change="picker" :clearable="false"></el-date-picker>
                </div>
            <!-- 基本考勤信息 -->
            <div>
                <el-table :data="personalAttendancRecordTable" :cell-style="cellStyle" @cell-click="cellDetail"
                    :header-cell-class-name="cellHeadStyle" style="width:100%; border:1px solid #d6cfe2;"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="personalAttendancRecordLoading">
                    <el-table-column prop="yearmon" label="年/月" show-overflow-tooltip align="center">
                    </el-table-column>
                    <el-table-column width="49" prop="one" label="1"    align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.one=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.one=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.one=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.one=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.one=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.one=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.one=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.one=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.one=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.one=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="two" label="2"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.two=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.two=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.two=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.two=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.two=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.two=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.two=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.two=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.two=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.two=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="three" label="3"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.three=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.three=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.three=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.three=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.three=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.three=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.three=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.three=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.three=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.three=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="four" label="4"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.four=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.four=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.four=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.four=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.four=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.four=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.four=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.four=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.four=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.four=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="five" label="5"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.five=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.five=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.five=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.five=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.five=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.five=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.five=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.five=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.five=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.five=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="six" label="6"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.six=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.six=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.six=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.six=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.six=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.six=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.six=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.six=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.six=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.six=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="seven" label="7"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.seven=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.seven=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.seven=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.seven=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.seven=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.seven=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.seven=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.seven=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.seven=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.seven=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="eight" label="8"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.eight=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.eight=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.eight=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.eight=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.eight=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.eight=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.eight=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.eight=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.eight=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.eight=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="nine" label="9"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.nine=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.nine=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.nine=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.nine=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.nine=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.nine=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.nine=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.nine=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.nine=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.nine=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="ten" label="10"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.ten=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.ten=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.ten=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.ten=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.ten=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.ten=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.ten=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.ten=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.ten=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.ten=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="eleven" label="11"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.eleven=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.eleven=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.eleven=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.eleven=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.eleven=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.eleven=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.eleven=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.eleven=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.eleven=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.eleven=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="twelve" label="12"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.twelve=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.twelve=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.twelve=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.twelve=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.twelve=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.twelve=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.twelve=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.twelve=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.twelve=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.twelve=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="thirteen" label="13"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.thirteen=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.thirteen=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.thirteen=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.thirteen=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.thirteen=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.thirteen=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.thirteen=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.thirteen=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.thirteen=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.thirteen=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="fourteen" label="14"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.fourteen=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.fourteen=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.fourteen=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.fourteen=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.fourteen=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.fourteen=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.fourteen=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.fourteen=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.fourteen=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.fourteen=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="fifteen" label="15"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.fifteen=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.fifteen=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.fifteen=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.fifteen=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.fifteen=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.fifteen=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.fifteen=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.fifteen=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.fifteen=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.fifteen=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="sixteen" label="16"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.sixteen=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.sixteen=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.sixteen=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.sixteen=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.sixteen=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.sixteen=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.sixteen=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.sixteen=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.sixteen=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.sixteen=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="seventeen" label="17"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.seventeen=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.seventeen=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.seventeen=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.seventeen=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.seventeen=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.seventeen=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.seventeen=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.seventeen=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.seventeen=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.seventeen=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="eighteen" label="18"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.eighteen=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.eighteen=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.eighteen=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.eighteen=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.eighteen=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.eighteen=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.eighteen=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.eighteen=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.eighteen=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.eighteen=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="nineteen" label="19"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.nineteen=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.nineteen=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.nineteen=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.nineteen=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.nineteen=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.nineteen=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.nineteen=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.nineteen=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.nineteen=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.nineteen=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="twenty" label="20"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.twenty=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.twenty=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.twenty=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.twenty=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.twenty=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.twenty=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.twenty=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.twenty=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.twenty=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.twenty=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="twentyone" label="21"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.twentyone=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.twentyone=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.twentyone=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.twentyone=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.twentyone=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.twentyone=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.twentyone=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.twentyone=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.twentyone=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.twentyone=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="twentytwo" label="22"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.twentytwo=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.twentytwo=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.twentytwo=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.twentytwo=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.twentytwo=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.twentytwo=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.twentytwo=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.twentytwo=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.twentytwo=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.twentytwo=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="twentythree" label="23"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.twentythree=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.twentythree=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.twentythree=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.twentythree=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.twentythree=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.twentythree=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.twentythree=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.twentythree=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.twentythree=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.twentythree=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="twentyfour" label="24"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.twentyfour=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.twentyfour=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.twentyfour=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.twentyfour=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.twentyfour=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.twentyfour=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.twentyfour=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.twentyfour=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.twentyfour=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.twentyfour=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="twentyfive" label="25"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.twentyfive=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.twentyfive=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.twentyfive=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.twentyfive=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.twentyfive=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.twentyfive=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.twentyfive=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.twentyfive=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.twentyfive=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.twentyfive=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="twentysix" label="26"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.twentysix=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.twentysix=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.twentysix=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.twentysix=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.twentysix=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.twentysix=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.twentysix=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.twentysix=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.twentysix=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.twentysix=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="twentyseven" label="27"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.twentyseven=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.twentyseven=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.twentyseven=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.twentyseven=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.twentyseven=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.twentyseven=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.twentyseven=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.twentyseven=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.twentyseven=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.twentyseven=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="twentyeight" label="28"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.twentyeight=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.twentyeight=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.twentyeight=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.twentyeight=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.twentyeight=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.twentyeight=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.twentyeight=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.twentyeight=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.twentyeight=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.twentyeight=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="twentynine" label="29"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.twentynine=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.twentynine=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.twentynine=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.twentynine=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.twentynine=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.twentynine=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.twentynine=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.twentynine=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.twentynine=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.twentynine=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="thirty" label="30"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.thirty=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.thirty=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.thirty=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.thirty=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.thirty=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.thirty=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.thirty=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.thirty=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.thirty=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.thirty=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column width="49" prop="thirtyone" label="31"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.thirtyone=='正常'"><i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i></div>
                            <div v-if="scope.row.thirtyone=='迟到'"><i class="el-icon-bell" style="color: rgb(255,0,0)"></i></div>
                            <div v-if="scope.row.thirtyone=='早退'"><i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i></div>
                            <div v-if="scope.row.thirtyone=='旷工'"><i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i></div>
                            <div v-if="scope.row.thirtyone=='漏签'"><i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i></div>
                            <div v-if="scope.row.thirtyone=='请假'"><i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i></div>
                            <div v-if="scope.row.thirtyone=='出差'"><i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i></div>
                            <div v-if="scope.row.thirtyone=='外出'"><i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i></div>
                            <div v-if="scope.row.thirtyone=='加班'"><i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i></div>
                            <div v-if="scope.row.thirtyone=='公休'"><i class="el-icon-s-home" style="color: rgb(153,153,153)"></i></div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 考勤类型图标 -->
            <div class="iconStyle">
                图标说明:&nbsp;
                <span>
                    <i class="el-icon-circle-check" style="color: rgb(56,187,246)"></i>正常
                </span>
                <span>
                    <i class="el-icon-bell" style="color: rgb(255,0,0)"></i>迟到
                </span>
                <span>
                    <i class="el-icon-warning-outline" style="color: rgb(184,146,255)"></i>早退
                </span>
                <span>
                    <i class="el-icon-circle-close" style="color: rgb(253,116,142)"></i>旷工
                </span>
                <span>
                    <i class="el-icon-stopwatch" style="color: rgb(209,85,233)"></i>漏签
                </span>
                <span>
                    <i class="el-icon-s-claim" style="color: rgb(77,194,247)"></i>请假
                </span>
                <span>
                    <i class="el-icon-s-promotion" style="color: rgb(72,198,80)"></i>出差
                </span>
                <span>
                    <i class="el-icon-suitcase" style="color: rgb(90,147,255)"></i>外出
                </span>
                <span>
                    <i class="el-icon-alarm-clock" style="color: rgb(141,107,243)"></i>加班
                </span>
                <span>
                    <i class="el-icon-s-home" style="color: rgb(153,153,153)"></i>公休
                </span>
            </div>
            <!-- 考勤明细 -->
            <el-row class="marginYTen">
                <el-col><span class="titleIcon"><i class="el-icon-menu"></i>考勤明细：</span></el-col>
            </el-row>
            <el-row>
                <el-table :cell-style="cellStyle" :header-cell-class-name="cellHeadStyle"
                    style="width:100%; border:1px solid #d6cfe2;"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="id"
                    :data="attendancRecordDetailsTable" v-loading="attendancRecordDetailsLoading" :empty-text="Empty_text">
                    <el-table-column prop="department.name" label="部门" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="date" label="日期" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="worktime" label="工作时段" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="time" label="签到时间/体温" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="time2" label="签退时间/体温" show-overflow-tooltip></el-table-column>
                </el-table>
            </el-row>
            <!-- 考勤流程 -->
            <el-row class="marginYTen">
                <el-col><span class="titleIcon"><i class="el-icon-menu"></i>考勤流程：</span></el-col>
            </el-row>
            <el-row>
                <el-table :cell-style="cellStyle" :header-cell-class-name="cellHeadStyle"
                    style="width:100%; border:1px solid #d6cfe2;" v-loading="attendancRecordFlowLoading"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="id"
                    :data="attendancRecordFlowTable" :empty-text="Empty_text">
                    <el-table-column prop="type" label="考勤类型" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="beginDate" label="开始时间" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="endDate" label="结束时间" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="length" label="时长(天)" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="title" label="请求标题" show-overflow-tooltip></el-table-column>
                </el-table>
            </el-row>
        </div> 
    </div>
</template>
<script>
  import tableStyles from '../../../../../utils/mixins.js'
  export default {
    mixins: [tableStyles],
    data () {
      return {
        personalAttendancRecordTable:[],
        personalAttendancRecordLoading:'',
        CheckingInDate:'',
        Empty_text: '点击上述日历查看每天的考勤情况', //考勤附表初始提示内容
        attendancRecordDetailsTable: [], //考勤明细数据数组
        attendancRecordDetailsLoading:'',
        attendancRecordFlowTable: [], //考勤流程数据数组
        attendancRecordFlowLoading:'',
        day: "",//考勤日
      }
    },
    mounted(){
        this.getCurrentDate();//当前日期
        this.getPersonalCheckingIn();
    },
    methods: {
        //当前日期
        getCurrentDate(){
            var date = new Date()
            var y = date.getFullYear()
            var m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
            this.CheckingInDate= y + '-' + m;
        },
        //日期选择器
        picker(val){
            this.CheckingInDate=val;
            this.getPersonalCheckingIn();
        },
        //个人考勤记录查询
        getPersonalCheckingIn(){
            this.personalAttendancRecordLoading=true;
            this.$http({
                url: '/sys/web/UserCenter/selectUserChick',
                method: 'get',
                params:{//一定要设置name，才可以传params
                    date:this.CheckingInDate ,
                }
            }).then(({data}) => {
                // console.log(data)
                if (data) {
                    this.personalAttendancRecordTable=data.list;
                    this.personalAttendancRecordLoading=false;
                }
            });
        },
        //考勤明细和流程请求
        cellDetail(row, column, event, cell){
            // 点击表格获取日
            this.day = column.label
            if(this.day=='年/月'){
                this.attendancRecordDetailsTable=[];
                this.attendancRecordFlowTable=[];
                return false
            }
            if (this.day < 10) {
                this.day = '0' + this.day
            }
            this.attendancRecordDetailsLoading=true;
            this.attendancRecordFlowLoading=true;
            this.$http({
                url: '/sys/user/userCheckin/selectchickdetail',
                method: 'get',
                params:{//一定要设置name，才可以传params
                    dateOfTime:this.CheckingInDate+'-'+this.day,
                    userid:row.sysuserid
                }
            }).then(({data}) => {
                // console.log(data)
                if (data) {
                    this.attendancRecordDetailsTable=data.list;
                    this.attendancRecordFlowTable=data.lcList;
                    if(this.attendancRecordDetailsTable.length==0 || this.attendancRecordFlowTable.length==0){
                        this.Empty_text='暂无数据'
                    }
                    this.attendancRecordDetailsLoading=false;
                    this.attendancRecordFlowLoading=false;
                }
            });
        },
    }
  }
</script>
<style scoped>
/* 上下10px外边距 */
.marginYTen {
    margin: 10px 0
}
/* 个人信息,考勤信息所有标题 */
.titleIcon {
    font-size: 14px;
    font-weight: 550;
    color: #2a8bd8;
}
/* 考勤小图标样式 */
.iconStyle {
    margin-top: 15px;
    margin-bottom: 8px;
    text-align: left;
    font-size: 12px;
}
</style>